//LoaderPage1.qml
import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
    width: 100
    height: 350
 
    Rectangle {
        id: listRect
        color: "green"
        anchors.fill: parent
        //菜单
        ListModel {
            id: listRouteModel
            ListElement {titleText: qsTr("标题0"); titleColor: "white"}
            ListElement {titleText: qsTr("标题1"); titleColor: "white"}
            ListElement {titleText: qsTr("标题2"); titleColor: "white"}
            ListElement {titleText: qsTr("标题3"); titleColor: "white"}
            ListElement {titleText: qsTr("标题4"); titleColor: "black"}
            ListElement {titleText: qsTr("标题5"); titleColor: "black"}
            ListElement {titleText: qsTr("标题6"); titleColor: "white"}
            ListElement {titleText: qsTr("标题7"); titleColor: "white"}
            ListElement {titleText: qsTr("标题8"); titleColor: "white"}
            ListElement {titleText: qsTr("标题9"); titleColor: "white"}
            ListElement {titleText: qsTr("标题10"); titleColor: "white"}
            ListElement {titleText: qsTr("标题11"); titleColor: "white"}
            ListElement {titleText: qsTr("标题12"); titleColor: "white"}
            ListElement {titleText: qsTr("标题13"); titleColor: "white"}
            ListElement {titleText: qsTr("标题14"); titleColor: "white"}
            ListElement {titleText: qsTr("标题15"); titleColor: "white"}
 
        }
 
        ListView {
            id: listRouteView
            x: 0
            y: 0
            anchors.rightMargin: 5
            anchors.leftMargin: 5
            anchors.topMargin: 5
            anchors.bottomMargin: 5
            spacing: 5
            anchors.fill: parent
            orientation: ListView.Vertical//垂直列表
            clip: true
            ScrollBar.vertical: ScrollBar {
                id: scrollBar
            }
 
            model: listRouteModel;
            focus: true
            delegate: tabDelegate
        }
        //Component
        Component {
            id: tabDelegate
            Rectangle {
                Image{
                    id:icon
                    width:24
                    height:24
                    source:"qrc:/myMenu.svg"
                }

                width: 100; height: 25;
                color: (listRouteView.currentIndex === index) ? "blue": "#BBBBBB"
                //标题
                Text {
                    width: parent.width - 3; height: 25;
                    anchors.left: icon.right;
                    anchors.leftMargin: 3;
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    font.pixelSize: 16;
                    color: (listRouteView.currentIndex === index) ? "red" : titleColor
                    text: ListElement.titleText
                    horizontalAlignment: Text.AlignLeft; //left
                    verticalAlignment: Text.AlignVCenter;//Center
                }
 
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        listRouteView.currentIndex = index
 
                        console.log("clicked currentIndex================" + listRouteView.currentIndex)
                    }
                }
            }
        }//end Component
 
    }
 
}

/*##^##
Designer {
    D{i:1;anchors_height:320;anchors_width:100;anchors_x:0;anchors_y:0}
}
##^##*/
